<template>
    <div style="background-color: #f3f8f8;height: 100%">
        <p class="head-title" v-if="approvers.length>0">请在每个审批步骤确认一个审批人。</p>
        <div class="frist-bg" v-if="approvers.length>0">
            <div v-for="(item,index) in approveNameAr" class="div-small">
                <!--没有数据的时候-->
                <img v-if="item.headImageUrl==='0'" @click="selectapprovePeople(index)" class="head-img" src="../../assets/officeadd.png">
                <!--有数据的时候 数据是null-->
                <img v-else-if="item.headImageUrl===null||item.headImageUrl==='' " @click="selectapprovePeople(index)" class="head-img" src="../../assets/examinedefault.png">
                <img v-else @click="selectapprovePeople(index)" class="head-img" :src="qn_domain+item.headImageUrl">

                <p v-bind:class="{ select: item.select, noselect: !item.select }">{{item.name}}</p>
                <img v-if="index<approvers.length-1" src="../../assets/officejiantou.png" class="jiantou">
            </div>
        </div>

        <div class="first-tank" v-if="isHidden" >
            <div style="height: 0.25rem;background-color: white">
                <img v-if="isHidden" src="../../assets/officesanjiao.png"
                     v-bind:class="{ 'first':isA, 'second': isB,'three':isC}">
            </div>
            <!--//监听子组件触发的selectHead事件,然后调用chooseHead方法-->
            <examineAlertComponent v-if="isHidden" :peopleList=approvers[approversCurrentindex] @selectHead="chooseHead"
                                   :msg="msg"></examineAlertComponent>
        </div>
        <p class="head-title" v-if="operators.length>0">该流程需要特定经办人发送给供应商，请添加经办人</p>
        <div class="frist-bg" v-if="operators.length>0">
            <div v-for="(item,index) in operatorNameAr" class="div-small">

                <!--没有数据的时候-->
                <img v-if="item.headImageUrl==='0'" @click="selectoperatorPeople(index)" class="head-img" src="../../assets/officeadd.png">
                <!--有数据的时候 数据是null-->
                <img v-else-if="item.headImageUrl===null||item.headImageUrl==='' " @click="selectoperatorPeople(index)" class="head-img" src="../../assets/examinedefault.png">
                <img v-else @click="selectoperatorPeople(index)" class="head-img" :src="qn_domain+item.headImageUrl">
                <p v-bind:class="{ select: item.select, noselect: !item.select }">{{item.name}}</p>
            </div>
        </div>

        <div class="first-tank" v-if="isHidden1">
            <div style="height: 0.25rem;background-color: white">
                <img v-if="isHidden1" src="../../assets/officesanjiao.png" class="first">
            </div>
            <!--//监听子组件触发的selectHead事件,然后调用chooseHead方法-->
            <examineAlertComponent1 v-if="isHidden1" :peopleList=operators @selectHead="chooseoperatorHead"
                                   :msg="msg"></examineAlertComponent1>
        </div>

        <yd-button v-bind:class="{ click: isClick, noClick: !isClick }"size="large" type="warning" @click.native="addClick" >发送</yd-button>


    </div>


</template>

<script>
    import {orderapply,commodityApprover,} from "../../pcof/post";
    import {userInfoData,qn_domain} from '../../globalVariables'
    import examineAlertComponent from "@/components/examineAlertComponent.vue";
    import examineAlertComponent1 from "@/components/examineAlertComponent.vue";

    export default {
        name: "officeExamine",
        data() {
            return {
                approversCurrentindex:0,//当前审核人
                isA: false,
                isB:false,
                isC:false,
                isHidden:false,
                isHidden1:false,
                approveNameAr:[],//审核人占位的名字和选择之后的名字信息
                approvers:[],//审核的数据列表
                operators:[],//经办的数据列表
                operatorNameAr:[],//经办占位的名字和选择之后的名字信息
                activeClass: 'select',
                errorClass: 'noselect',
                isClick:false,//按钮是否能点击
                qn_domain :localStorage.getItem(qn_domain),


        }
        },

        components: {
            examineAlertComponent,
            examineAlertComponent1
        },
        methods:{
            selectapprovePeople(index) {
                this.approversCurrentindex=index;
                if (index === 0) {
                    if (this.isA ===true)
                    {
                        this.isA = false;
                        this.isB = false;
                        this.isC = false;
                        this.isHidden=false;
                        this.approversCurrentindex=0;

                    }else
                    {
                        this.isA = true;
                        this.isB = false;
                        this.isC = false;
                        this.isHidden=true;
                        this.approversCurrentindex=0;
                    }

                }
                if (index === 1) {
                    if (this.isB ===true)
                    {
                        this.isA = false;
                        this.isB = false;
                        this.isC = false;
                        this.isHidden=false;
                        this.approversCurrentindex=0;

                    }else
                    {
                        this.isA = false;
                        this.isB = true;
                        this.isC = false;
                        this.isHidden=true;
                        this.approversCurrentindex=1;
                    }

                }
                if (index === 2) {
                    if (this.isC===true)
                    {
                        this.isA = false;
                        this.isB = false;
                        this.isC = false;
                        this.isHidden=false;
                        this.approversCurrentindex=0;

                    }else
                    {
                        this.isA = false;
                        this.isB = false;
                        this.isC = true;
                        this.isHidden=true;
                        this.approversCurrentindex=2;
                    }

                }
            },
            chooseHead(msg) {
                //审核人传过来的值
                this.isHidden=false;
                this.isA = false;
                this.isB = false;
                this.isC = false;
                console.log(msg);
                this.approveNameAr.splice(this.approversCurrentindex,1,{select:true,name:msg.name,
                    headImageUrl:msg.headImageUrl,uuid:msg.uuid});
                this.isClick=this.$options.methods.buttonState(this.approveNameAr,this.operatorNameAr);//在test3中调用test2的方法


            },
            selectoperatorPeople()
            {
                console.log('经办人');
                if (this.isHidden1===true)
                {
                    this.isHidden1=false;

                }else
                {
                    this.isHidden1=true;
                }
            },
            chooseoperatorHead(msg)//经办人传过来的值
            {
                this.operatorNameAr.splice(0,1,{select:true,name:msg.name,
                    headImageUrl:msg.headImageUrl,uuid:msg.uuid});
                this.isHidden1=false;
                this.isClick=this.$options.methods.buttonState(this.approveNameAr,this.operatorNameAr);//在test3中调用test2的方法


            },
           async addClick()//发送按钮的点击事件
            {
                if(this.isClick === true)
                {

                    /**
                     * 办公用品提交数据
                     * mobile
                     *  applierUuid 个人的id
                     * instUuid 机构的id
                     * deptUuid部门的id
                     * contactNumber 联系电话
                     * addr 地址
                     * room房间号
                     * remark 备注信息
                     * commodities 办公用品的数据 json{description uuid supplierUuid brand amounts}
                     * approvers 审核人的ID 逗号分隔
                     * operator 经办人的id
                     */
                    // mobile,applierUuid,instUuid,deptUuid,contactNumber,addr,room,remark,commodities,approvers,operator,


                    var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
                    var applierUuid = JSON.parse(localStorage.getItem(userInfoData)).uuid;
                    var instUuid = JSON.parse(localStorage.getItem(userInfoData)).bankUuid;
                    var deptUuid = JSON.parse(localStorage.getItem(userInfoData)).deptUuid;
                    var contactNumber=JSON.parse(localStorage.getItem('phone'));
                    var addr=JSON.parse(localStorage.getItem('address'));
                    var room=JSON.parse(localStorage.getItem('room'));
                    var remark=JSON.parse(localStorage.getItem('remark'));
                    var commodities=JSON.stringify(JSON.parse(localStorage.getItem('officedata')));

                    console.log(commodities);
                    var  approvers=new Array();
                    for (var i = 0; i < this.approveNameAr.length; i++) {
                        approvers.push(this.approveNameAr[i].uuid);

                    }

                    var  operator=this.operatorNameAr[0].uuid;
                    // for (var i = 0; i < this.operatorNameAr.length; i++) {
                    //     operator.push(this.operatorNameAr[i].uuid);
                    // }
                    // console.log(approvers.toString());

                    var response = await orderapply(mobile,applierUuid,instUuid,deptUuid,contactNumber,addr,room,remark,commodities,approvers.toString(),operator.toString());
                    if (response.data.code === 200) {
                        this.$dialog.loading.close();

                        localStorage.removeItem('officedata');
                        localStorage.removeItem('room');
                        localStorage.removeItem('phone');
                        localStorage.removeItem('address');
                        // this.$router.back(-3);
                        this.$router.replace({name: 'homeDetail'});

                    }else
                    {
                        this.$dialog.loading.close();
                        this.$dialog.toast({
                            mes: response.data.msg,
                            timeout: 1500
                        });
                    }
                }else
                {

                }



            },
            buttonState(approveNameAr,operatorNameAr)
            {
                var approveuuid=new Array();
                var operatoruuid=new Array();

                for (var i=0;i<approveNameAr.length;i++)
                {
                    if (approveNameAr[i].uuid ==='0')
                    {

                    }else
                    {
                        approveuuid.push(approveNameAr[i].uuid)
                    }
                }
                console.log(approveNameAr+operatorNameAr);
                if (operatorNameAr[0].uuid ==='0')
                {

                }else
                {
                    operatoruuid.push(operatorNameAr[0].uuid)
                }

                if ((approveNameAr.length===approveuuid.length)&&(operatorNameAr.length===operatoruuid.length))
                {
                    return true;

                }else
                {
                    return false;

                }
            }


        },

       async created(){

            var partnerUuid = JSON.parse(localStorage.getItem(userInfoData)).partnerUuid;
            var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
            var response = await commodityApprover(mobile,partnerUuid);
            if (response.data.code === 200) {
                this.$dialog.loading.close();
                this.approvers=response.data.data.approvers;//审核人
                this.operators=response.data.data.operators;//经办人
                if (this.operators.length===0&&this.approvers.length===0)
                {
                    this.$dialog.toast({
                        mes:'没有审核人和经办人，请联系管理员！',
                        timeout: 3000
                    });
                    return;
                }

                if (this.operators.length===0&&this.approvers[0].length===0)
                {
                    this.$dialog.toast({
                        mes:'没有审核人和经办人，请联系管理员！',
                        timeout: 3000
                    });
                    return;
                }

                for (var i = 0; i < this.approvers.length; i++) {
                    //select 1是选择的 2是没有被选择的
                    this.approveNameAr.push({select:false,name:"添加审核人",headImageUrl:'0',uuid:'0'});
                }
                this.operatorNameAr.push({select:false,name:"添加经办人",headImageUrl:'0',uuid:'0'});

            }else
            {
                this.$dialog.loading.close();
                this.$dialog.toast({
                    mes: response.data.msg,
                    timeout: 1500
                });
            }



        },


    }
</script>

<style lang='scss'>

    @import "./office.scss";
    .frist-bg {
        width: 100%;
        background-color: white;
        /*border-bottom: 1px solid #e5e5e5;*/
        border-top: 1px solid #e5e5e5;
        height: 15%;
        padding-left: 10px;
        padding-right: 20px;
        padding-top: 0px;
        display: flex;
        justify-content: flex-start;


    }
    .div-small
    {
        width: 35%;
    }
    .head-img
    {
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 0.55rem;
        margin-top: 0.2rem;
        margin-right: 0.8rem;
        margin-left: 0.2rem;
    }
    .jiantou
    {
        width: 1rem;
        height: 0.6rem;
        text-align: center;
        margin-bottom: 0.2rem;
        position: relative;
        top: -1.2rem;
        left:0.8rem;
    }
    .head-title
    {
        color: #a1a1a1;
        padding-top: 20px;
        padding-bottom: 5px;
        padding-left: 20px;
        font-size: 0.25rem;
        text-align: left;
    }
    .first-tank
    {
        color: white;
        font-size: 0.25rem;
        height: 50%;
    }
    .first
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;
        left:-2.6rem;
    }
    .second
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;
        left:-0.3rem;


    }
    .three
    {
        width: 0.6rem;
        height: 0.3rem;
        position: relative;
        right:-2.0rem;
    }
    .select
    {
        color: #a1a1a1;
        text-align: center;
        margin-right: 0.3rem;
    }
    .noselect
    {
        color: #e9b778;
        text-align: center;
        margin-right: 0.3rem;
    }
    .noClick
    {
        background-color:#c6c6c6;
        color:white;
    }
    .click
    {
        background-color:#e9b778;
        color:white

    }


</style>